<%
/**
 * @classification UNCLASSIFIED
 *
 * @module views.flight-manual
 *
 * @copyright Copyright (C) 2018, Lockheed Martin Corporation
 *
 * @license Apache-2.0
 *
 * @owner James Eckstein
 *
 * @author Josh Kaplan
 *
 * @description This file defines the view for the MBEE flight manual.
 */
%>

<div class="container">
  <div id="fm" class="row">
    <div class="col-12">
      <h1 class="title">Flight Manual</h1>
      <h2 class="subtitle">Version <%= M.version %></h2>
    </div>
    <div class="col-3">
      <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
        <% for (let i = 0; i < sections.length; i++ ) { %>
          <a class="nav-link <%= (i === 0) ? 'active': '' %>"
             id="v-pills-<%= sections[i].id %>-tab"
             data-toggle="pill"
             href="#v-pills-<%= sections[i].id %>"
             role="tab"
             aria-controls="v-pills-<%= sections[i].id %>"
             aria-selected="<%= (i === 0) ? 'true': 'false' %>">
            <%= sections[i].title %>
          </a>
        <% } %>
        <a class="nav-link" id="api-doc" href="/doc/api" target="_blank">
          Reference: API Doc
        </a>
        <a class="nav-link" id="jsdoc" href="/doc/index.html" target="_blank">
          Reference: JSDoc
        </a>
      </div>
    </div>
    <div class="col-9">
      <div class="tab-content" id="v-pills-tabContent">
        <% for (let i = 0; i < sections.length; i++ ) { %>
        <div class="tab-pane fade <%= (i === 0) ? 'show active': '' %>"
             id="v-pills-<%= sections[i].id %>"
             role="tabpanel"
             aria-labelledby="v-pills-<%= sections[i].id %>-tab">
          <%- sections[i].content %>
        </div>
        <% } %>
      </div>
    </div>
  </div>
</div>

<%- contentFor('styles') %>
<link type="text/css" rel="stylesheet" href="/css/fm.css">

<%- contentFor('scripts') %>
<script>
  // If # anchor is in URL, show that tab\
  const url = document.location.toString();
  if (url.match('#')) {
    const e = document.querySelector('#' + url.split('#')[1]);
    const t = e.closest('.tab-pane');
    $('.nav-pills a[href="#' + t.id + '"]')
      .tab('show');
  }
</script>

